<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./node_modules/ejs/ejs.min.js"></script>
  </head>
  <body>
    <script>
      // 模板引擎 ： 可以让html拥有逻辑
      // css ： less sass；css预处理器。
      // 模板引擎： ejs pug jade numjucks smart ....
      // 前端使用ejs ：
      // 1.引入ejs 文件
      // 2.调用ejs暴露的render方法创建html；
      // console.log(ejs);
      // 3.显示变量 ： <%=变量%> 插值表达式
      //    let htmldata =  ejs.render("<h1><%=title%>我的年龄是<%=age %></h1>",{title:"我是标题",age:20});
      // //    console.log(htmldata);

      //     document.body.innerHTML = htmldata;
      // 4.ejs里如果遇到 js 逻辑可以通过 <% %> 包裹起来就可以生效；

      let arr = [
        {
          name: "张三",
          age: 20,
        },
        {
          name: "张三2",
          age: 23,
        },
        {
          name: "张三3",
          age: 21,
        },
      ];
      let htmldata = ejs.render(
        `<ul><% arr.forEach(item=>{ %>
            <li>姓名是<%=item.name %>年龄是<%=item.age %></li>
       <% }) %></ul>`,
        { arr }
      );
      //    console.log(htmldata);
      document.body.innerHTML = htmldata;
    </script>
  </body>
</html>
